<template>
  <div class="tool">
    <el-tooltip effect="dark" content="标注" placement="bottom">
      <i
        class="el-icon-edit"
        @click="changeTool('route')"
        :class="[currentToolName == 'route' ? 'activeClass' : 'defaultClass']"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="折线" placement="bottom">
      <i
        class="el-icon-arrow-down"
        @click="changeTool('polyline')"
        :class="[
          currentToolName == 'polyline' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="矩形" placement="bottom">
      <i
        class="el-icon-news"
        @click="changeTool('rectangle')"
        :class="[
          currentToolName == 'rectangle' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="多边形" placement="bottom">
      <i
        class="el-icon-house"
        @click="changeTool('polygon')"
        :class="[currentToolName == 'polygon' ? 'activeClass' : 'defaultClass']"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="点" placement="bottom">
      <i
        class="el-icon-s-opportunity"
        @click="changeTool('point')"
        :class="[currentToolName == 'point' ? 'activeClass' : 'defaultClass']"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="圆" placement="bottom">
      <i
        class="el-icon-help"
        @click="changeTool('circle')"
        :class="[currentToolName == 'circle' ? 'activeClass' : 'defaultClass']"
      ></i>
    </el-tooltip>
    <!-- el-icon-help -->
  </div>
</template>

<script>
export default {
  name: "tool",
  props: ["currentTool", "type"],
  data() {
    return {
      currentToolName: "",
      markType: "",
    };
  },
  watch: {
    //两个组件里的按钮点击 显示点击状态
    currentTool: function (newValue, oldValue) {
      if (
        !["route", "polyline", "rectangle", "polygon", "point",'circle'].includes(
          newValue
        )
      ) {
        this.currentToolName = "";
      }
    },
  },
  mounted() {
    this.markType = this.type;
  },
  methods: {
    changeTool(eventName) {
      if (this.markType == "artificial" || this.markType == "scientific") {
        this.currentToolName = eventName;
        this.$emit("toolSelected", eventName);
      } else {
        this.$message.warning(
          "当前模式不支持标注，请先点击标注信息，切换成'人工模式或者科研模式'~"
        );
      }
    },
    changeMarkType() {
      if (this.markType == "artificial" || this.markType == "scientific") {
      } else {
        this.currentToolName = "";
        this.$emit("toolSelected", "");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.activeClass {
  border-radius: 3px;
  color: #fff;
  background-color: #1890ff;
}

.defaultClass {
  background-color: transparent !important;
}

.tool {
  //width: 30px;
  margin: 0px 5px;
}

[class*=" el-icon-"],
[class^="el-icon-"] {
  box-sizing: border-box;
  height: 30px;
  width: 30px;
  line-height: 30px;
  font-size: 20px;
  padding: 0 5px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
  cursor: pointer;

  &:nth-child(1) {
    margin-top: 5px;
  }

  &:hover {
    border-radius: 3px;
    color: #fff;
    background-color: #1890ff;
  }
}
</style>
